<template>
  <div class="panel">
    <el-amap
      :center="center"
      :zoom="zoom"
      :map-style="mapStyle"
      :view-mode="viewMode"
      :rotation="rotation"
      :pitch="pitch"
    >
      <!-- 卫星图层 -->
      <el-amap-layer-satellite :visible="true" />

      <!-- 标记点 -->
      <el-amap-marker
        v-for="area in farmData.areas"
        :key="area.name"
        :position="area.position"
        :content="createMarkerContent(area)"
        :offset="[-20, -20]"
        @mouseover="handleMarkerMouseover(area)"
        @mouseout="handleMarkerMouseout"
      />

      <!-- 信息窗体 -->
      <el-amap-info-window
        v-if="currentInfo"
        :position="currentInfo.position"
        :visible="infoWindowVisible"
        :content="createInfoWindowContent(currentInfo)"
        :offset="[0, -30]"
        :auto-move="false"
        @close="closeInfoWindow"
      />
    </el-amap>

    <div class="overlay-controls">
      <div class="control-group">
        <el-radio-group v-model="currentView" size="small">
          <el-radio-button label="overview">总览</el-radio-button>
          <el-radio-button label="humidity">湿度</el-radio-button>
          <el-radio-button label="temperature">温度</el-radio-button>
          <el-radio-button label="pests">病虫害</el-radio-button>
        </el-radio-group>
      </div>
      <div class="status-info">
        <div class="info-item">
          <span class="label">监测设备：</span>
          <span class="value">正常运行 12/15</span>
        </div>
        <div class="info-item">
          <span class="label">预警信息：</span>
          <span class="value warning">3条</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElRadioGroup, ElRadioButton } from 'element-plus'
import {
  ElAmap,
  ElAmapLayerSatellite,
  ElAmapMarker,
  ElAmapInfoWindow
} from '@vuemap/vue-amap'

const currentView = ref<'overview' | 'humidity' | 'temperature' | 'pests'>('overview')
const center = ref<[number, number]>([112.443001, 39.37686]);
const zoom = ref(16.3)
const mapStyle = ref('amap://styles/satellite')
const viewMode = ref('3D')
const rotation = ref(-3)
const pitch = ref(0)
const currentInfo = ref<any>(null)
const infoWindowVisible = ref(false)

// 模拟农场位置数据
const farmData = {
  center: [112.447101, 39.37386],
  areas: [
    { name: 'A区', position: [112.444526, 39.375843], status: 'normal', crops: '水稻', area: '2000㎡', humidity: 65, temperature: 28, pests: 2 },
    { name: 'B区', position: [112.44871, 39.376116], status: 'warning', crops: '小麦', area: '1800㎡', humidity: 58, temperature: 26, pests: 1 },
    { name: 'C区', position: [112.442187, 39.376387], status: 'normal', crops: '玉米', area: '2200㎡', humidity: 72, temperature: 29, pests: 0 },
    { name: 'D区', position: [112.450202, 39.376132], status: 'alert', crops: '大豆', area: '1500㎡', humidity: 68, temperature: 27, pests: 3 },
    { name: 'E区', position: [112.445427, 39.374317], status: 'normal', crops: '水稻', area: '2500㎡', humidity: 75, temperature: 30, pests: 0 },
    { name: 'F区', position: [112.449609, 39.374197], status: 'normal', crops: '小麦', area: '1900㎡', humidity: 62, temperature: 25, pests: 1 }
  ]
}

// 获取标记点的样式
const getMarkerStyle = (data: any) => {
  const baseStyle = {
    'border-radius': '50%',
    'background-color': '#67C23A',
    'box-shadow': '0 0 20px rgba(103, 194, 58, 0.9)',
    'border': '4px solid #fff',
    'color': '#fff',
    'text-align': 'center',
    'line-height': '80px',
    'font-size': '20px',
    'opacity': '0.85',
    'width': '80px',
    'height': '80px',
    'font-weight': 'bold'
  }

  if (currentView.value === 'overview') {
    baseStyle['background-color'] = data.status === 'normal' ? '#67C23A' :
                                  data.status === 'warning' ? '#E6A23C' : '#F56C6C'
  } else {
    const value = data[currentView.value]
    const thresholds = {
      humidity: { warning: 60, alert: 40 },
      temperature: { warning: 28, alert: 32 },
      pests: { warning: 2, alert: 3 }
    }

    baseStyle['background-color'] = value > thresholds[currentView.value].alert ? '#F56C6C' :
                                  value > thresholds[currentView.value].warning ? '#E6A23C' : '#67C23A'
  }

  return baseStyle
}

// 创建标记点内容
const createMarkerContent = (data: any) => {
  return `<div style="${Object.entries(getMarkerStyle(data))
    .map(([key, value]) => `${key}:${value}`)
    .join(';')}">${data.name}</div>`
}

// 创建信息窗体内容
const createInfoWindowContent = (data: any) => {
  if (currentView.value === 'overview') {
    return `
      <div class="info-window">
        <div>区域：${data.name}</div>
        <div>作物：${data.crops}</div>
        <div>面积：${data.area}</div>
        <div>状态：${data.status === 'normal' ? '正常' :
                   data.status === 'warning' ? '警告' : '危险'}</div>
      </div>
    `
  }

  const titles = {
    humidity: '湿度',
    temperature: '温度',
    pests: '病虫害等级'
  }
  const units = {
    humidity: '%',
    temperature: '°C',
    pests: '级'
  }

  return `
    <div class="info-window">
      <div>区域：${data.name}</div>
      <div>${titles[currentView.value]}：${data[currentView.value]}${units[currentView.value]}</div>
    </div>
  `
}

// 处理标记点鼠标悬停
const handleMarkerMouseover = (area: any) => {
  currentInfo.value = area
  infoWindowVisible.value = true
}

// 处理标记点鼠标移出
const handleMarkerMouseout = () => {
  infoWindowVisible.value = false
}

// 关闭信息窗体
const closeInfoWindow = () => {
  infoWindowVisible.value = false
}
</script>

<style scoped>
.panel {
  height: 100%;
  width: 100%;
  position: relative;
}

:deep(.amap-logo) {
  display: none !important;
}

:deep(.amap-copyright) {
  display: none !important;
}

.overlay-controls {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.control-group {
  background: rgba(0, 0, 0, 0.2);
  padding: 8px;
  border-radius: 4px;
}

.status-info {
  background: rgba(0, 0, 0, 0.2);
  padding: 8px;
  border-radius: 4px;
  color: #33ffd0;
}

.info-item {
  display: flex;
  align-items: center;
  margin: 4px 0;
}

.info-item .label {
  margin-right: 8px;
}

.info-item .value {
  color: #67C23A;
}

.info-item .value.warning {
  color: #E6A23C;
}

:deep(.el-radio-button__inner) {
  background: transparent;
  border-color: #33ffd0;
  color: #33ffd0;
}

:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background: #33ffd0 !important;
  border-color: #33ffd0 !important;
  color: #fff !important;
  box-shadow: -1px 0 0 0 #33ffd0 !important;
}

:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner:hover) {
  background: #33ffd0 !important;
  border-color: #33ffd0 !important;
  color: #fff !important;
}

:deep(.info-window) {
  padding: 12px;
  line-height: 1.8;
  font-size: 14px;
  color: #fff;
  background: rgba(18, 161, 127, 0.95);
  border-radius: 8px;
  border: 2px solid rgba(51, 255, 208, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  min-width: 200px;
}

:deep(.info-window div) {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

:deep(.info-window div:last-child) {
  margin-bottom: 0;
}

:deep(.amap-info-content) {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

:deep(.amap-info-sharp) {
  display: none !important;
}

:deep(.amap-info-close) {
  display: none !important;
}
</style>
